<template>
	<view class="container">

		<!-- 页面标题 -->
		<view class="page-title">
			<text>宠物信息</text>
		</view>
		
		<!-- 宠物信息表单 -->
		<view class="form-card">
			<!-- 宠物类型 -->
			<view class="form-item">
				<view class="form-label">
					<text>类型</text>
				</view>
				<view class="form-value">
					<text>{{petInfo.type}}</text>
				</view>
			</view>
			
			<!-- 宠物品种 -->
			<view class="form-item">
				<view class="form-label">
					<text>品种</text>
				</view>
				<view class="form-value">
					<text>{{petInfo.breed}}</text>
				</view>
			</view>
			
			<!-- 宠物性别 -->
			<view class="form-item">
				<view class="form-label">
					<text>性别</text>
				</view>
				<view class="form-value">
					<text>{{petInfo.gender}}</text>
				</view>
			</view>
			
			<!-- 宠物年龄 -->
			<view class="form-item">
				<view class="form-label">
					<text>年龄</text>
				</view>
				<view class="form-value">
					<text>{{petInfo.age}}</text>
				</view>
			</view>
			
			<!-- 宠物图片 -->
			<view class="form-item">
				<view class="form-label">
					<text>图片</text>
				</view>
				<view class="form-value">
					<view class="upload-btn" @click="uploadImage">
						<text class="upload-text">+上传</text>
					</view>
				</view>
			</view>
			
			<!-- 宠物视频 -->
			<view class="form-item">
				<view class="form-label">
					<text>视频</text>
				</view>
				<view class="form-value">
					<view class="upload-btn" @click="uploadVideo">
						<text class="upload-text">+上传</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 提交按钮 -->
		<view class="submit-section">
			<view class="submit-btn" @click="submitForm">
				<text class="submit-text">提交</text>
			</view>
		</view>
		
		<!-- 背景装饰 -->
		<view class="bg-decoration">
			<view class="pet-outline cat-outline"></view>
			<view class="pet-outline dog-outline"></view>
			<view class="pet-outline rabbit-outline"></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isListView: true,
			petInfo: {
				type: '狗',
				breed: '萨摩耶',
				gender: '公',
				age: '1岁',
				images: [],
				videos: []
			}
		}
	},
	
	onLoad(options) {
		this.loadPetInfo()
	},
	
	methods: {
		// 加载宠物信息
		loadPetInfo() {
			// 这里可以从API加载宠物信息
			console.log('加载宠物信息')
		},
		
		// 返回上一页
		goBack() {
			this.$tab.navigateBack()
		},
		
		// 切换视图模式
		toggleView() {
			this.isListView = !this.isListView
		},
		
		// 上传图片
		uploadImage() {
			uni.chooseImage({
				count: 9,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					console.log('选择图片成功:', res.tempFilePaths)
					this.petInfo.images = this.petInfo.images.concat(res.tempFilePaths)
					this.$tab.showToast('图片上传成功')
				},
				fail: (err) => {
					console.log('选择图片失败:', err)
					this.$tab.showToast('图片上传失败')
				}
			})
		},
		
		// 上传视频
		uploadVideo() {
			uni.chooseVideo({
				sourceType: ['album', 'camera'],
				maxDuration: 60,
				camera: 'back',
				success: (res) => {
					console.log('选择视频成功:', res.tempFilePath)
					this.petInfo.videos.push(res.tempFilePath)
					this.$tab.showToast('视频上传成功')
				},
				fail: (err) => {
					console.log('选择视频失败:', err)
					this.$tab.showToast('视频上传失败')
				}
			})
		},
		
		// 提交表单
		submitForm() {
			if (this.petInfo.images.length === 0) {
				this.$tab.showToast('请至少上传一张图片')
				return
			}
			
			// 这里可以提交表单数据到服务器
			console.log('提交宠物信息:', this.petInfo)
			this.$tab.showToast('提交成功')
			
			// 提交成功后返回上一页
			setTimeout(() => {
				this.$tab.navigateBack()
			}, 1500)
		}
	}
}
</script>

<style scoped lang="scss">
.container {
	min-height: 100vh;
	background: linear-gradient(135deg, #f8f6f0 0%, #f5f2e8 100%);
	background: #fffcf3 url('http://117.72.123.244:8080/admin-api/infra/file/4/get/20250801/形状背景_1754063150309.png');
	background-size: 100% 90%;
	background-position: bottom;
	background-repeat: no-repeat;
	position: relative;
	overflow: hidden;
}

/* 状态栏 */
.status-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 30rpx;
	height: 44rpx;
	background: transparent;
}

.status-time {
	font-size: 28rpx;
	font-weight: 600;
	color: #333;
}

.status-icons {
	display: flex;
	align-items: center;
	gap: 10rpx;
	color: #333;
	font-size: 24rpx;
}

/* 页面标题 */
.page-title {
	text-align: center;
	padding: 40rpx 0;
}

.page-title text {
	font-size: 48rpx;
	font-weight: bold;
	color: #333;
}

/* 表单卡片 */
.form-card {
	margin: 300rpx 50rpx;
	padding: 40rpx 30rpx;
}

/* 表单项 */
.form-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #4a90e2;
	
	&:last-child {
		border-bottom: none;
	}
}

.form-label {
	flex: 1;
}

.form-label text {
	font-size: 32rpx;
	color: #333;
	font-weight: 500;
}

.form-value {
	flex: 1;
	text-align: right;
}

.form-value text {
	font-size: 32rpx;
	color: #666;
}

/* 上传按钮 */
.upload-btn {
	display: inline-block;
	padding: 10rpx 0;
}

.upload-text {
	font-size: 32rpx;
	color: #4a90e2;
	text-decoration: underline;
}

/* 提交按钮区域 */
.submit-section {
	padding: 60rpx 30rpx;
}

.submit-btn {
	background: #4a90e2;
	border-radius: 20rpx;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8rpx 20rpx rgba(74, 144, 226, 0.3);
	transition: all 0.3s ease;
	
	&:active {
		transform: scale(0.98);
		box-shadow: 0 4rpx 10rpx rgba(74, 144, 226, 0.3);
	}
}

.submit-text {
	font-size: 36rpx;
	color: #fff;
	font-weight: bold;
}

/* 背景装饰 */
.bg-decoration {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: -1;
}

.pet-outline {
	position: absolute;
	opacity: 0.1;
}

.cat-outline {
	top: 200rpx;
	right: 50rpx;
	width: 80rpx;
	height: 60rpx;
	background: #ccc;
	border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
	
	&::before {
		content: '';
		position: absolute;
		top: -10rpx;
		left: 15rpx;
		width: 12rpx;
		height: 12rpx;
		background: #ccc;
		border-radius: 50%;
	}
	
	&::after {
		content: '';
		position: absolute;
		top: -10rpx;
		right: 15rpx;
		width: 12rpx;
		height: 12rpx;
		background: #ccc;
		border-radius: 50%;
	}
}

.dog-outline {
	top: 400rpx;
	left: 30rpx;
	width: 100rpx;
	height: 70rpx;
	background: #ccc;
	border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
	
	&::before {
		content: '';
		position: absolute;
		top: -15rpx;
		left: 20rpx;
		width: 15rpx;
		height: 15rpx;
		background: #ccc;
		border-radius: 50%;
	}
	
	&::after {
		content: '';
		position: absolute;
		top: -15rpx;
		right: 20rpx;
		width: 15rpx;
		height: 15rpx;
		background: #ccc;
		border-radius: 50%;
	}
}

.rabbit-outline {
	bottom: 300rpx;
	right: 80rpx;
	width: 60rpx;
	height: 80rpx;
	background: #ccc;
	border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
	
	&::before {
		content: '';
		position: absolute;
		top: -20rpx;
		left: 10rpx;
		width: 8rpx;
		height: 20rpx;
		background: #ccc;
		border-radius: 10rpx;
	}
	
	&::after {
		content: '';
		position: absolute;
		top: -20rpx;
		right: 10rpx;
		width: 8rpx;
		height: 20rpx;
		background: #ccc;
		border-radius: 10rpx;
	}
}

/* 图标字体 */
.iconfont {
	font-family: "iconfont" !important;
	font-size: 32rpx;
	color: #4a90e2;
}

.icon-back:before {
	content: "\e6cc";
}

.icon-wifi:before {
	content: "\e6c2";
}

.icon-battery:before {
	content: "\e6c3";
}

.icon-list:before {
	content: "\e6cd";
}
</style>